@use '../styles/constants';

material-docs-app {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

app-navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
}

material-docs-app > app-component-sidenav {
  flex: 1;
}

material-docs-app > router-outlet + .main-content,
material-docs-app > router-outlet + app-component-sidenav {
  margin-top: 56px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: constants.$extra-small-breakpoint-width) {
  material-docs-app > router-outlet + .main-content,
  material-docs-app > router-outlet + app-component-sidenav {
    margin-top: 92px;
    overflow-y: visible;
  }
}
